<form
  class="d-flex flex-column h-100"
  [formGroup]="platformForm"
  (keyup.enter)="platformForm.valid && onSubmit()"
  (ngSubmit)="onSubmit()"
>
  @if (data.platform.id) {
    <h1 i18n mat-dialog-title>Update platform</h1>
  } @else {
    <h1 i18n mat-dialog-title>Add platform</h1>
  }
  <div class="flex-grow-1 py-3" mat-dialog-content>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Name</mat-label>
        <input
          formControlName="name"
          matInput
          (keydown.enter)="$event.stopPropagation()"
        />
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Url</mat-label>
        <input
          formControlName="url"
          matInput
          (keydown.enter)="$event.stopPropagation()"
        />
        @if (platformForm.get('url')?.value) {
          <gf-entity-logo
            class="mr-3"
            matSuffix
            [url]="platformForm.get('url').value"
          />
        }
      </mat-form-field>
    </div>
  </div>
  <div class="justify-content-end" mat-dialog-actions>
    <button mat-button type="button" (click)="onCancel()">
      @if (platformForm.dirty) {
        <ng-container i18n>Cancel</ng-container>
      } @else {
        <ng-container i18n>Close</ng-container>
      }
    </button>
    <button
      color="primary"
      mat-flat-button
      type="submit"
      [disabled]="!(platformForm.dirty && platformForm.valid)"
    >
      <ng-container i18n>Save</ng-container>
    </button>
  </div>
</form>
